<template>
  <div id="address">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-swipe-cell  v-for="(item,index) in addressArr" :key="index">
        <div class="flex">
          <div class="name">
            <p>{{item.user_name}}</p>
          </div>
          <div class="text">
            <p>{{item.tel_number}}</p>
            <p>{{`${item.province_Name}${item.city_Name}${item.county_Name}${item.detail_Info}`}}</p>
          </div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="onClickDel(item.id)" />
        </template>
      </van-swipe-cell>
    </van-list>
    <van-button type="primary" class="add" to="/address/edit">新建+</van-button>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #address{
    width: 100%;
    height: 100%;
  }
  /deep/.flex{
    display: flex;
    width: 100%;
    border-bottom: 1px solid gray;
    background-color: rgb(179, 179, 179);
    .name{
      width: 20%;
      flex: 0 0 auto;
    }
    .text{
      width: 80%;
      flex: 0 0 auto;
    }
  }
  /deep/.delete-button{
    height: 100%;
  }
  /deep/.add{
    position: fixed;
    bottom: 0px;
  }
</style>

<script lang="ts">
// @ is an alias to /src
import { 
  Image as VanImage,Cell,List,SwipeCell,Button
} from 'vant';
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import router from '../router';
import store from '../store/index';
import addressApi from '../api/address.api';

Vue.use(VanImage).use(Cell).use(List).use(SwipeCell).use(Button);
@Component
export default class AddressComponent extends Vue {
  private addressArr: any[]=[];
  private addressData: any={};
  private loading: boolean = false;
  private finished: boolean = false;
  
  async created(){
    store.commit('global/setShowPageLoading',true);
    
    this.addressData=await addressApi.getAddress();
    this.addressArr=this.addressData.data;

    store.commit('global/setShowPageLoading',false);
  }

  private async onLoad(){
    const p=this.addressData.page+1;
    if(p>this.addressData.pageCount){
      this.finished=true;
      return;
    }
    this.loading=true;
    this.addressData=await addressApi.getAddress({
      page: p
    });
    this.addressArr=this.addressArr.concat(this.addressData.data);
    this.loading=false;
  }

  private async onClickDel(id){
    addressApi.delAddress(id);
    for(const i in this.addressArr){
      if(this.addressArr[i].id==id){
        this.addressArr.splice((i as any),1);
      }
    }
  }
}
</script>
